<template>
  <template v-if="settling">
    <van-loading size="48px">上传分数中...</van-loading>
  </template>
  <template v-else>
    <div class="flex w-max h-max">
      <main class="w-screen h-64 my-20">
        <section
          class="w-full bg-blue-500 text-white flex justify-center items-center text-xl py-20"
        >
          {{ titles[titleIndex] }}
        </section>
        <div
          class="mt-7 w-full h-32 flex flex-col justify-between box-border items-center px-8"
        >
          <van-button type="primary" @click="changeTitle(1)" plain size="large"
            >是</van-button
          >
          <van-button type="danger" @click="changeTitle(0)" plain size="large"
            >否</van-button
          >
        </div>
      </main>
    </div>
  </template>
</template>

<script setup>
import { ref } from 'vue'
import { SDS } from '../../libs/titles'
import { useRouter } from 'vue-router'
import { getStorage } from '@/utils/storage'
import { Evaluation } from '@/api/Evaluation'
const router = useRouter()
const sds = new SDS()
const titles = ref(sds.title)
const settling = ref(false)
const options = ref([])
const titleIndex = ref(0)
const EvaluationRequest = new Evaluation()
const changeTitle = async (count) => {
  options.value.push(count)
  if (titleIndex.value === titles.value.length - 1) {
    settling.value = true
    await EvaluationRequest.submitScore({
      score: options.value,
      title: 'SDS',
      uid: getStorage('uid')
    })
    router.replace({ name: 'Home' })
    settling.value = false
    return
  }
  titleIndex.value += 1
}
</script>
